<style>
    #common {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .common-header {
        background-color: var(--menu-bg-color);
        color: var(--menu-text-color);
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .common-header-body {
        width: var(--main-width);
        display: flex;
        flex-direction: row;
    }

    .common-header-logo {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 32px;
        margin-right: 10px;
        font-weight: bold;
        color: #ccc;
        cursor: pointer;
    }

    .common-header-menu {
        display: flex;
        flex-direction: row;
    }

    .common-menu-item {
        padding: 15px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .common-menu-item .iconfont {
        font-size: 24px;
    }

    .common-header-user {
        height: 60px;
        width: 60px;
    }

    .common-header-body .el-image {
        padding: 10px;
        overflow: hidden;
    }

    .common-header-body img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        border: 1px solid #fff;
    }

    .common-body {
        flex-grow: 1;
        align-items: center;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .common-body-main {
        background-color: var(--main-bg-color);
        display: flex;
        flex-direction: row;
        width: var(--main-width);
        flex-grow: 1;
        overflow: hidden;
        height: 0;
    }

    .common-tips {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }

    .common-title {
        font-size: 24px;
        border-bottom: 3px dashed #ddd;
        padding-bottom: 10px;
        margin: 20px 20px 10px 20px;
        font-weight: bold;
    }
    

    *::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    *:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
    }

    blockquote {
        background: #e5e5e5;
        display: inline-block;
        margin-block: 0;
        margin-inline: 0;
        border-radius: 5px;
        margin-left: 0px;
        margin-bottom: 10px;
        padding: 10px 15px;
        color: #999;
        font-weight: 300;
    }

    .comment-area p {
        margin-block: 0;
    }

    .comment-area {
        display: flex;
        flex-direction: row;
    }

    .comment-area .comment-content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
</style>
<template>
    <div id="common">
        <div class="common-header">
            <div class="common-header-body">
                <router-link to="/" class="common-header-logo">
                    Gitee.Info
                </router-link>
                <div class="common-header-menu">
                    <router-link to="/repo" class="common-menu-item">
                        Repository
                    </router-link>
                    <router-link to="/issue" class="common-menu-item">
                        Issue
                    </router-link>
                    <router-link to="/org" class="common-menu-item">
                        Organization
                    </router-link>
                    <router-link to="/explore" class="common-menu-item">
                        Explore
                    </router-link>
                </div>
                <div class="app-space"></div>
                <router-link to="/profile" class="common-header-user" v-if="userInfo">
                    <el-image :src="userInfo.avatar_url" />
                </router-link>
            </div>
        </div>
        <div class="common-body">
            <router-view class="common-body-main"></router-view>
        </div>
    </div>
</template>
<script>
    import request from "@/lib/request";
    import helper from "@/lib/helper";
    export
        default {
            data() {
                return {
                    userInfo: {
                        avatar_url: require('@/assets/img/logo.png')
                    },
                    bg: import('@/assets/img/bg_dark.jpg')
                }
            },
            created() {
                this.userInfo = helper.getUserInfo();
            },
            beforeRouteEnter(to, from, next) {
                let userInfo = localStorage.getItem("userInfo") || "{}";
                let access_token = localStorage.getItem("access_token") || "";
                userInfo = JSON.parse(userInfo);
                if (!userInfo || !access_token) {
                    next((vm) => {
                        vm.$router.push("/login");
                    });
                } else {
                    next();
                }
            },
            methods: {

            }
        }
</script>